<template>
	<view class="exinfo">
		<view class="info-title" v-if="formData.status==1">
			<image src="/static/images/daihukuan.png" ></image>
			<text style="padding-left: 10px;">待兑换</text>
		</view>
		<view class="info-title" v-else="formData.status==3">
			<text style="padding-left: 10px;">已兑换</text>
		</view>
		
		<view class="pla-body">
			<view class="infosetting">商品信息</view>
			<view class='img-list'>
				<view class="pla-img">
					<image :src="formData.shop.image"></image>
				</view>
				<view class="pla-info">
					<view class="ply-name">{{formData.shop.title}}</view>
					<view style="color: #999999;font-size: 12px;">{{formData.shop.subtitle}}</view>
					<view style="color: #666666;font-size: 12px;padding-top: 10px;">{{formData.total}}积分</view>
				</view>
				<view class="pla-num">
					<view style="font-size: 14px;color: #333333;font-weight: bold;">{{formData.price}}积分</view>
					<view style="color: #999999;font-size: 12px;">×{{formData.num}}</view>
				</view>
			</view>
			<view class="count">
				<view style="font-size: 12px;">总额</view>
				<view style="font-size: 12px;">{{formData.total}} 积分</view>
			</view>
	
			<view class="count" style="padding: 10px;border-top: 1px solid #EFEFF4;">
				<view style="font-size: 13px;color: #333333;">实付积分</view>
				<view style="font-size: 13px;color: #333333;">{{formData.total}} 积分</view>
			</view>
		</view>
		

	</view>
</template>

<script>
	export default {
		data() {
			return {
				formData:""
			}
		},
		onLoad(option) {
			if(option.address) {
				let aa = option.address;
				let bb = decodeURIComponent(aa)
				this.formData = JSON.parse(bb);
				console.log(this.formData)
				// this.formData.content = this.formData.content.replace(/\<img/gi, '<img style="max-width:100%;height:auto" '); //图片自适应问题
			}
		},
		methods: {
			hanldplaceOrder(){
				uni.navigateTo({
					url:'/pages/member/IntegralMall/payIntegral'
				})
			}
		}
	}
</script>

<style scoped>
.exinfo{
	width: 100%;
}
.info-title{
	font-size: 21px;
	color: #FF5F49;
	padding: 24px;
	background-color: #FFFFFF;
	text-align: center;
}
.info-title image{
	width: 30px;height: 30px; vertical-align: text-top;
}

	/**/
	.pla-body {
		margin: 10px 16px 10px 16px;
		border-radius: 4px;
		background-color: #fff;
	}
	.img-list{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	.pla-img{
		    margin: 10px;
	}
	.pla-img image{
		width: 90px;
		height: 90px;
		border-radius: 4px;
	}
	.infosetting{
		padding: 12px 10px;
		border-bottom: 1px solid #EFEFF4;
		color: #999999;
		font-size: 13px;
	}
	.pla-num{
		width: 105px;
		padding-top: 10px;
		text-align: right;
		padding-right: 10px;
	}
	.ply-name{
		  overflow: hidden;
		  text-overflow: ellipsis;
		  display: -webkit-box;
		  -webkit-line-clamp: 2;
		  -webkit-box-orient: vertical;
		color: #333333;
		font-weight: bold;
		font-size: 12px;
	}
	.pla-info{
		    width: 480upx;
		    display: flex;
		    flex-direction: column;
		    justify-content: center;
	}
		
	.count{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		color: #999999;
		padding: 0 10px;
	}
	.red-price{
		font-size: 16px;
	}
	
	.no-but{
		display: flex;
		flex-direction: row;
		background-color: #fff;
		padding: 15px;
		    justify-content: flex-end;
		    position: fixed;
		    width: 100%;
		    bottom: 0;
	}
	.ex-no{
		width:158upx;
		height:60upx;
		border-radius:30px;
		border:1px solid rgba(239,239,244,1);
		color: #333333;
		line-height: 58upx;
		text-align: center;
		font-size: 13px;
		margin-right: 10px;
	}
	.ex-yes{
		width:158upx;
		height:60upx;
		border-radius:30px;
		border:1px solid rgba(255,95,73,1);
		color: #FF5F49;
		line-height: 58upx;
		text-align: center;
		font-size: 13px;
	}
</style>
